<template class="page-bg">
  <div >
    <div class="weui-cells form weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
        <div class="weui-cell__bd ">
          <input class="weui-input" pattern="[0-9]*" required placeholder="请输入姓名" type="name" v-model="item.name">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd">
          <label class="weui-label">手机号</label>
        </div>
        <div class="weui-cell__bd">
          <input class="weui-input" placeholder="请输入手机号" type="tel" v-model="item.telephone">
        </div>
      </div>
      <div class="weui_cell weui_cell_select">
        <div class="weui_cell_bd weui_cell_primary">
          <select class="weui_select" v-model="item.level">
            <option value=0>请选择用户角色</option>
            <option v-for="data in level"
                    :key="data.value"
                    :value="data.value"
                    :label="data.label"></option>
          </select>
        </div>
      </div>
    </div>

    <div class="weui-btn-area" @click = "submit();">
      <a href="javascript:;" class="weui-btn weui-btn_primary">提交</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'addUserForm',
  data () {
    return {
      item: {
        name: '',
        telephone: '',
        level: Number
      },
      level: [
        {
          value: this.PI,
          label: 'PI'
        },
        {
          value: this.assistant,
          label: 'assistant'
        },
        {
          value: this.PR,
          label: 'PR'
        },
        {
          value: this.student,
          label: 'student'
        },
        {
          value: this.stranger,
          label: 'stranger'
        }
      ]
    }
  },
  methods: {
    submit () {
      if (this.item.name === '' || this.item.telephone === '') {
        this.$notify.warning({
          title: '请输入姓名和电话!'
        })
        return
      }
      if (this.item.level === 0) {
        this.$notify.warning({
          title: '请选择用户身份!'
        })
        return
      }
      this.$axios({
        method: 'post',
        url: this.url + '/user/',
        data: JSON.stringify(this.item)
      }).then((user) => {
        if (user.status === 200) {
          alert('添加成功')
          this.item.level = 0
          this.item.name = ''
          this.item.telephone = ''
        } else {
          alert(user)
        }
      }).catch((err) => {
        alert(err)
      })
    }
  },
  created () {
    this.item.level = 0
  }
}
</script>

<style lang="stylus" scoped>
  .form
    margin-top 0
  .btn
    background  #C0BFC4
  .selectColor
    color: #d1d1d1
  .selectStyle
    height: 50px
    line-height: 50px
    width: 100%
  .leaderChoose
    margin-top -0.08rem
</style>
